以下是整理的一个大体步骤，做个记录

底层index页面a是b和c还有map的父组件

（created钩子函数执行顺序是从父元素到子元素，挨个执行，mounted钩子函数执行顺序是从子元素到父元素倒叙进行）

一，加载顺序：

1，进入页面，先初始化，当map 渲染挂载完成之后（mounted），使用事件监听的方式，触发色斑图组件c进行dom的操作，将canvas画上

2，进入要展示色斑图的页面b时，获取色斑图要展示的数据，获取到之后，事件监听发送给底层index，然后再给色斑图组件赋值

二，画canvas色斑图

首先你要有数据，数据的内容是一个字符串，

由每个区域色斑图的经纬度和该地区展示的颜色组成，当然，色斑图，是不同区域，不同颜色组成，所以这个数据就是这一大块经纬度和颜色的全部，然后循环画出该区域的canvas，用该颜色填充即可

1，我这里的经纬度返回是“112.847 24.546“这种类型的经纬度展示，需要用leaflet中new L.latLng（纬度，经度）来固定化成

这种格式，然后放到一个数组里，后面再用leaflet的

这个方法，获取到坐标点{x:1,y:1}这种类型，然后画出该区域就行了

下面是这个色斑图的具体代码

在map组件里面：bus.$emit('loaded', this.id);

初始化页面index.vue：将数据传给色斑图组件：

Bus.$on('refreshColor', (data, colorType) =>

      this.getColorBind(data, colorType)

    )

在要显示色斑图的地方，传输数据：              Bus.$emit('refreshColor', { data: res }, this.activeColorType)